<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core">
    <style>
        #mx .ui-menubutton button{
            width: 25px;
            height:18px !important
        }
    </style>

    <p:panel header="REQUERIMIENTOS" style="border: none;">
        <div align="center">
            <h:form id="datos">
                <p> <h:outputText value="REGISTRO DE REQUERIMIENTOS" style="font-weight: bold; font-size: 18px; color:#069;"/> </p>

                <h:panelGrid columns="2" >

                    <h:outputText value="Requerimiento : " /> 
                    <p:inputTextarea value="#{requirementBean.requirement.name}" style="width: 250px;"
                                     required="true" label="Requerimiento" autoResize="false" maxlength="299"/>  

                    <h:outputText value="Modalidad:" />  
                    <p:selectOneMenu  panelStyle="width:240px" value="#{requirementBean.requirement.idModality}" converter="ModalityObject"
                                      effect="fade" style="width:250px"  filter="true" filterMatchMode="startsWith">  
                        <f:selectItem itemLabel="Seleccione" itemValue="" />  
                        <f:selectItems value="#{requirementBean.listModality}" var="player" itemLabel="#{player.name}" itemValue="#{player}"/>                          
                    </p:selectOneMenu> 

                    <div align="center">
                    </div> 
                </h:panelGrid><br/>
                <p:commandButton value="Registrar" action="#{requirementBean.saveRequirement()}"
                                 styleClass="ui-priority-primary" update=":formMod"
                                 icon="ui-icon ui-icon-disk" /> 
            </h:form>
            <br/><br/>

            <!--mostrando los tipos de comisiones -->
            <h:form id="formMod">
                <p:tabView id="modalityRequ" value="#{requirementBean.listModalityRequeriment}" var="modality">
                    <p:tab title="#{modality.name}">
                        <p:dataTable value="#{modality.requirementList}" id="tab" var="requeriment" editable="true">

                            <p:ajax event="rowEdit" listener="#{requirementBean.onEdit}" update="tab" />

                            <p:column headerText="Orden">
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{requeriment.number}"/>
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:spinner value="#{requeriment.number}" style="width:100%"/>  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>

                            <p:column headerText="Requerimientos">
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{requeriment.name}"/>
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText value="#{requeriment.name}" style="width:100%"/>  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>

                            <p:column headerText="Requerimientos">
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{requeriment.state}"/>
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <h:selectOneMenu value="#{requeriment.state}" style="width:100%" >  
                                            <f:selectItem itemLabel="REQUERIDO" itemValue="REQUERIDO"/>  
                                            <f:selectItem itemLabel="NO REQUERIDO" itemValue="NO REQUERIDO"/>
                                        </h:selectOneMenu>  
                                    </f:facet>  
                                </p:cellEditor>
                            </p:column>

                            <p:column style="width:6%">  
                                <p:rowEditor />  
                            </p:column>  
                        </p:dataTable>
                    </p:tab>

                </p:tabView>
            </h:form>
        </div>
    </p:panel>
</ui:composition>


